iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 21

Vue 與 Element UI 兩三事#21 element-ui input(2)

  • 分享至 

  • xImage
  •  

正文:
對於數字輸入框,element-ui 有自己的元件可供使用,僅需提供初始值即可,並且可以額外接受最大最小值的設定

<element-input-number v-model="dataNumber" :min="2" :max="10"></element-input-number> 

除此之外,我們還可以透過設定 :step 來使 number box 的數值是經過 step 內的數值遞增遞減的,不過我們還是可以透過直接更改內數值來脫離原本設定的遞增遞減值,當我們不希望使用者透過更改內部數值來脫離 step 所建立的規則時,我們可以添加 step-strictly 給予其一個布林值後決定是否讓使用者脫離 step 所建立的規則。

當我們需要在 number box 內使用小數數值時,我們可以透過 precision 屬性來控制其小數點後顯示的位數

radio-box

<el-radio v-model="radioModel" label="1">選項一</el-radio>
<el-radio v-model="radioModel" label="2">選項二</el-radio>

在這邊,v-model 放的是單選紐的 key,而label 則是他的 value
也可以將其改寫成一個按鈕群組,共用相同的 v-model

<el-radio-group v-model="radioModel">
    <el-radio label="1">選項一</el-radio>
    <el-radio label="2">選項二</el-radio>
</el-radio-group>

若不想顯示為單選紐的樣式,也可以將 radio 替換成 button,並且一樣可以使用 size 屬性

<el-radio-group v-model="radioModel">
    <el-radio-button label="1">選項一</el-radio-button>
    <el-radio-button label="2">選項二</el-radio-button>
</el-radio-group>

checkbox

    <el-checkbox v-model="checked">多選框一</el-checkbox>
    <el-checkbox v-model="checkedSecond">多選框二</el-checkbox>

這邊的 v-model 接受的是布林值,同 radio-button ,我們一樣可以使用多選群組來決定我們多選結果,這邊的 v-model 所接受的是一個陣列,內部會存放選取的值,而當 el-checkbox 同時存在內容和 label 時,label 所存放的是其 value ,而內容為 key

    <el-checkbox-group v-model="checkList">
        <el-checkbox label="a">選項A</el-checkbox>
        <el-checkbox label="b">選項B</el-checkbox>
        <el-checkbox label="c">選項C</el-checkbox>
    </el-checkbox-group>

我們也可以在 el-checkbox-group 中添加 min 和 max 來決定最少最多要勾選幾個多選框


上一篇
Vue 與 Element UI 兩三事#20 第三週回顧
下一篇
Vue 與 Element UI 兩三事#22 element-ui 時間選擇器
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言